import React, { Component } from "react";
import ProfileHeader from "./profileHeader.jsx";
import ProfileAbout from "./ProfileAbout.jsx";
import ProfileCreds from "./ProfileCreds.jsx";
import ProfileGithub from "./ProflieGithub.jsx";
import { getProfileByHandle } from "../../actions/profileActions";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Spinner from "../../common/Spinner.jsx";
import {Link} from "react-router-dom"

class Profile extends Component {
  componentDidMount() {
    if (this.props.match.params.handle) {
      this.props.getProfileByHandle(this.props.match.params.handle);
    }
  }
  render() {
      const {profile,loading} = this.props.profile
      let profileContent;
      if(profile === null  || loading){
          profileContent = <Spinner></Spinner>
      }else{
          profileContent = (
            <div>
            <div className="row">
              <div className="col-md-6">
                <Link to="/profiles" className="btn btn-light mb-3 float-left">
                  返回个人信息
              </Link>
              </div>
              <div className="col-md-6" />
            </div>
            <ProfileHeader profile={profile} />
            <ProfileAbout profile={profile} />
            <ProfileCreds education={profile.education} experience={profile.experience} />
            {
              profile.githubusername
                ? (<ProfileGithub username={profile.githubusername} />)
                : null
            }
  
          </div>
          )
      }
    return (
      //   <div>
      //     <ProfileHeader></ProfileHeader>
      //     <ProfileAbout></ProfileAbout>
      //     <ProfileCreds></ProfileCreds>
      //     <ProflieGithub></ProflieGithub>
      //   </div>
      <div className="profile">
        <div className="container">
          <div className="row">
            <div className="col-md-12">{profileContent}</div>
          </div>
        </div>
      </div>
    );
  }
}
Profile.propTypes = {
  getProfileByHandle: PropTypes.func.isRequired,
  profile: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile
});

export default connect(mapStateToProps, { getProfileByHandle })(Profile);
